
.just-back {
}
.just, .back {
	float: left;
	width: 50%;
}

.ms-round {
	position: relative;
	left: 50%;
	top: 0.04rem;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	width: .8rem;
	height: .8rem;
	z-index: 10;
}
.ms-round .circle0:after {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	content: "";
	width: .5rem;
	height: .5rem;
	background-repeat: no-repeat;
	background-size: contain;
}
.ms-round .circle0 {
	z-index: 11;
 	border-radius: 50%;
	background-image: -webkit-linear-gradient(to bottom,#fff, #b5b7bc);
	background-image: linear-gradient(to bottom,#fff, #b5b7bc);
}
.ms-round .circle0:active {
	background-image: -webkit-linear-gradient( to bottom,#fff, #b5b7bc);
	background-image: linear-gradient(to bottom,#fff, #b5b7bc);
}
.just .circle0:after {
	background-image: url(../img/just.png);
}
.back .circle0:after {
	background-image: url(../img/back.png);
}
.just > span, .back > span {
	font-size: 0.14rem;
	line-height: .35rem;
	color: #fff;
}
.circle {
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 50%;
	opacity: 0;
}
.circle0 {
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	width: .65rem;
	height: .65rem;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 1;
}
.circle1 {
	z-index: 7;
	margin-left: -.4rem;
	margin-top: -.4rem;
	width: .8rem;
	height:.8rem;
	background-color: rgba(235, 175, 175, .3);
}
.circle2 {
	z-index: 8;
	margin-left: -.45rem;
	margin-top: -.45rem;
	width: 0.9rem;
	height: 0.9rem;
	background-color: rgba(245, 204, 204, .2);
}


.c1 {
	animation: zoom 1s .2s infinite;
	-webkit-animation: zoom 2s .5s infinite;
	-moz-animation:zoom 2s .5s infinite;
	-ms-animation:zoom 2s .5s infinite;
	-o-animation:zoom 2s .5s infinite;
}
.c2 {
	animation: zoom 1s .2s linear;
	-webkit-animation: zoom 2s .2s infinite;
	-moz-animation:zoom 2s .2s infinite;
	-ms-animation:zoom 2s .2s infinite;
	-o-animation:zoom 2s .2s infinite;
}
@keyframes zoom {
    0% {
        transform: scale(0.8);
        opacity: 0
    }

    50% {
        transform: scale(1);
        opacity: 1
    }

    80% {
        transform: scale(1.2);
        opacity: 0.2
    }
	100% {
		transform: scale(1);
		opacity: 0
	}
}

@-webkit-keyframes zoom {
    0% {
        -webkit-transform: scale(0.8);
        opacity: 0
    }

    50% {
        -webkit-transform: scale(1);
        opacity: 1
    }

    80% {
        -webkit-transform: scale(1.2);
        opacity: 0.2
    }
	100% {
		-webkit-transform: scale(1);
		opacity: 0
	}
}
/*@keyframes zoom {
	0%{ opacity: .3;}

	30%{ opacity: .1;}
	40%{ opacity: .3;}
	50%{ opacity: .0;}
	60%{ opacity: .1;}
	70%{ opacity: .3;}
	80%{ opacity: .0;}
	90%{ opacity: .1;}
	100%{ opacity: .2;}
}*/

.just-line span i {
	left: 0;
	width: 100%;
	max-width: 195%;
	min-width: 5%;
	overflow: hidden;
}
.back-line span i {
	right: 0;
	left: auto;
	width: 100%;
	max-width: 195%;
	min-width: 5%;
	overflow: hidden;
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
    	animation-delay:1.5s;
	-webkit-animation-delay:1.5s; /* Safari 和 Chrome */
}

@keyframes shake {
    0%,100% {
        transform: translate3d(0,0,0)
    }

    10%,30%,50%,70%,90% {
        transform: translate3d(-5px,0,0)
    }

    20%,40%,60%,80% {
        transform: translate3d(5px,0,0)
    }
}
@-webkit-keyframes shake {
    0%,100% {
        -webkit-transform: translate3d(0,0,0);
    }

    10%,30%,50%,70%,90% {
        -webkit-transform: translate3d(-5px,0,0);
    }

    20%,40%,60%,80% {
        -webkit-transform: translate3d(5px,0,0);
    }
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}